<template>
  <div class="big">
     <van-icon name="arrow-left" class="back" @click="back()" />
    <div class="ban">
     
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in good.list" :key="item.id">
            <img :src="item" alt="" class="bannerImg">
        </van-swipe-item>

      </van-swipe>
    </div>
    <div class="tit">
      <h5>{{good.shop}}</h5>
      <p>{{good.detail}}</p>
      <span>${{good.price}}</span>
    </div>
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="1"
      :quota="99"
      :quota-used="0"
      :hide-stock="sku.hide_stock"
      :message-config="messageConfig"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />

    <div class="change">
      <div class="c1" @click="changeShow()">
        请选择规格数量
        <van-icon name="arrow" />
      </div>
      <div class="c2">
        促销
        <span>包邮</span> 满200.00元免邮费
        <van-icon name="arrow" />
      </div>
    </div>

    <div class="evaluate">
      <div class="evatit">
        <div class="tleft">用户评价(8)</div>
        <div class="tright">
          <span>99%</span>好评>
        </div>
      </div>

      <div class="items">
        <img src="../assets/img/gr1.png" alt />

        <div class="itemRight">
          <div class="read">
            路***光
            <van-rate v-model="value" readonly size="10px" />
          </div>
          <span>上午&nbsp;&nbsp;10:01</span>
          <p>颜值高，口感好，送货超快，配上饭菜感觉非常Nice</p>
        </div>
      </div>
      <div class="items">
        <img src="../assets/img/gr.png" alt />
        <div class="itemRight">
          <div class="read">
            路***光
            <van-rate v-model="value" readonly size="10px" />
          </div>
          <span>上午&nbsp;&nbsp;10:01</span>
          <p>颜值高，口感好，送货超快，配上饭菜感觉非常Nice</p>
        </div>
        <div class="imgs">
          <img src="../assets/img/eva.jpg" alt />
          <img src="../assets/img/eva.jpg" alt />
        </div>
      </div>
    </div>
    <div class="h_20"></div>
    <van-tabs v-model="active">
      <van-tab title="标签 1">
        <img src="../assets/img/detail.jpg" alt />
      </van-tab>
      <van-tab title="标签 2" class="tab2">
        <ul>
          <li>
            <span>商品名称</span>
            <p>{{good.shop}}</p>
          </li>
          <li>
            <span>国家</span>
            <p>中国</p>
          </li>
          <li>
            <span>价格</span>
            <p>{{good.price}}</p>
          </li>
           <li>
            <span>历史价格</span>
            <p>{{good.oldprice}}</p>
          </li>
          <li>
            <span>规格</span>
            <p>{{good.product}}</p>
          </li>
         
          <li>
            <span>产品规格</span>
            <p>桃红葡萄酒</p>
          </li>
          <li>
            <span>温馨提示</span>
            <p>
              1、除明确质量问题外，均不接受退换货。
              <br />2、请将产品保存于阴凉、通风、干燥处，开瓶后请尽快饮用。
              <br />3、湿度饮酒怡情，过度饮酒伤身。
              <br />4、注意:饮酒后禁止驾驶机动
              车。
              5、本品不对未成年人出售。
            </p>
          </li>
        </ul>
      </van-tab>
      <van-tab title="标签 3" class="tab3">
        <h5>Q:如何申请退换货?</h5>
        <p>
          A、1.支持无忧退换货的商品，自收到商品之日起
          在无忧退换货期限内，顾客可申请无忧退换货;食
          品、定作类商品、贴身衣物、积分兑换等特殊商品，无质量问题不支持退换货;
          2.如果是退货，退款将原路返还，不同的银行处理
          时间不同，预计1-5个工作日到账;
          3.退货流程:确认收货-申请退货-客服审核通过-月
          户寄回商品-仓库签收验货-退款审核-退款完成;
          4.换货流程:确认收货-申请换货-客服审核通过-用户寄回商品-仓库签收验货-客服确认-换货完成;
          5.质量问题和平台问题退换货运费由承担，个人原
          因退货运费由用户自行承担。上门取件费用由平台
          统一与快递服务商结算，顾客只需将退换货商品交
          给上门取件快递员寄回。如顾客选择自行寄回商
          品，请先垫付运费，到货验证商品后，严选将以现。
        </p>
      </van-tab>
    </van-tabs>

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="消息" dot @click="toNofy()"/>
      <van-goods-action-icon icon="cart-o" text="购物车" badge="5" @click="goCart()"/>
      <van-goods-action-button type="warning" text="加入购物车" @click="addCart()" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>


<script>
import Vue from "vue";
import { Sku } from "vant";
Vue.use(Sku);
import { requestDetailGood } from "../api/detail";
export default {
  methods: {
    onBuyClicked: function() {
      alert("暂未开发");
    },
    toNofy:function(){
      this.$router.push('/notify')
    },
    onAddCartClicked: function() {
      this.show = false;
    },
    changeShow: function() {
      this.show = true;
    },
    addCart: function() {
    
      let oneGood={
        name:this.good.shop,
        id:this.good.id,
        num:1,
        state:false,
        oldprice:(Number(this.good.price)+19).toFixed(2),
        url:this.good.picture,
        price:this.good.price
      }
      let cartList=this.$store.getters.cartList||[];
      console.log(cartList);


    if( cartList.some(item=>item.id==oneGood.id)){
        let index=cartList.findIndex(item=>item.id==oneGood.id)
        cartList[index].num++
        console.log(cartList[index]);
        alert('已添加')
    } else{
        this.$store.dispatch('SETCARTLIST',oneGood)
        alert('添加成功')
    }
      
    },
    back: function() {
      this.$router.go(-1);
    },
    async getGood(id) {
      let res = await requestDetailGood(id);
      let data=res.data
      let { resultCode, resultInfo } = data;
      if (resultCode == 1) {
        // this.good = resultInfo;
        this.$store.dispatch('SETGOOD',resultInfo)
        localStorage.setItem('detail',JSON.stringify(this.$store.getters.setDetail))

       this.good= JSON.parse(localStorage.getItem('detail'))
        this.goods.picture=this.good.picture

      }
    },
    goCart:function(){
      this.$router.push('/shoppingCart').catch(err=>err)
    }
  },
  created() {
   
    this.getGood(this.$route.params.id);
 
  },
  beforeDestroy () {
    
  },
  data() {
    return {
      show: false,
      value: 5,
      active: 0,
      good: {},
      sku: {
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: "1", // skuValueId：规格值 id
                name: "红色", // skuValueName：规格值名称
                imgUrl: "https://img01.yzcdn.cn/2.jpg", // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: "https://img01.yzcdn.cn/2p.jpg" // 用于预览显示的规格类目图片
              },
              {
                id: "1",
                name: "蓝色",
                imgUrl: "https://img01.yzcdn.cn/2.jpg",
                previewImgUrl: "https://img01.yzcdn.cn/2p.jpg"
              }
            ],
            largeImageMode: true //  是否展示大图模式
          }
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "1", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110 // 当前 sku 组合对应的库存
          }
        ],
        price: "1.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        messages: [
          {
            // 商品留言
            datetime: "0", // 留言类型为 time 时，是否含日期。'1' 表示包含
            multiple: "0", // 留言类型为 text 时，是否多行文本。'1' 表示多行
            name: "留言", // 留言名称
            type: "text", // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
            required: "1", // 是否必填 '1' 表示必填
            placeholder: "", // 可选值，占位文本
            extraDesc: "" // 可选值，附加描述文案
          }
        ],
        hide_stock: false // 是否隐藏剩余库存
      },
      goods: {
        picture: "https://img01.yzcdn.cn/1.jpg"
      },
      messageConfig: {
        uploadImg: () => {
          return new Promise(resolve => {
            setTimeout(
              () =>
                resolve(
                  "https://img01.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg"
                ),
              1000
            );
          });
        },
        // 可选项，自定义图片上传逻辑，使用此选项时，会禁用原生图片选择
        customUpload: () => {
          return new Promise(resolve => {
            setTimeout(() => {
              resolve("https://img01.yzcdn.cn/vant/leaf.jpg");
            }, 1000);
          });
        },
        // 最大上传体积 (MB)
        uploadMaxSize: 3,
        // placeholder 配置
        placeholderMap: {
          text: "xxx",
          tel: "xxx"
        },
        initialMessages: {
          留言: "留言信息"
        }
      }
    };
  }
};
</script>

<style scoped lang="scss">
body {
  background-color: #f2f2f2 !important;
}
.big {
  height: 100vh;
  background-color: #f2f2f2;
  .back {
    position: fixed;
    top: 10px;
    left: 20px;
    z-index: 99;
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 100%;
    text-align: center;
    line-height: 30px;
  }
}
.ban {
  width: 100%;
  height: 414px;
  position: relative;
  
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
  
    width: 100%;
    height: 100%;
    .bannerImg{
        width: 100%;
       
    }
  }
}
.tit {
  height: 130px;
  background-color: #fff;
  padding: 1rem;
  text-align: left;
  h5 {
    font-size: 20px;
    font-weight: normal;
    margin-top: 10px;
     overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  p {
    font-size: 1rem;
    color: #a2a7b9;
    margin: 16px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 16px;
  }
  span {
    font-size: 22px;
    color: red;
    font-weight: 600;
  }
}
.change {
  height: 112px;
  background-color: #fff;
  margin-top: 10px;
  width: 100%;
  padding-left: 1rem;
  .c1,
  .c2 {
    height: 54px;
    border-bottom: 1px solid #bebebe;
    font-size: 1rem;
    color: black;
    line-height: 54px;
    padding-right: 1rem;
    span {
      width: 54px;
      height: 30px;
      border: 1px solid #bebebe;
      border-right: 1px solid #bebebe;
      border-radius: 4px;
      line-height: 30px;
      text-align: center;
      display: inline-block;
      margin-right: 2px;
    }
    .van-icon-arrow {
      float: right;
      margin-top: 20px;
      color: #ababab;
    }
  }
  .c2 {
    border: none;
  }
}
.evaluate {
  height: 73%;
  background-color: #fff;
  margin-top: 10px;
  padding-left: 16px;
  font-size: 16px;
  margin-bottom: 10px;
  .evatit {
    height: 50px;
    line-height: 50px;
    padding-right: 16px;
    .tleft {
      float: left;
    }
    .tright {
      float: right;
      span {
        color: red;
      }
    }
  }
  .items {
    height: 142px;
    border-top: 1px solid #f2f2f2;
    padding: 16px 16px 16px 0;
    text-align: left;
    &:last-child {
      height: 226px;
      .imgs {
        margin-left: 57px;

        img {
          width: 96px;
          height: 96px;
          margin-right: 12px;
          border-radius: 0;
        }
      }
    }
    .itemRight {
      width: 325px;
      height: 110px;
      float: right;
      .read {
        width: 90px;
        height: 46px;
        color: #39362a;
        font-size: 18px;
        float: left;
      }
      span {
        float: right;
        color: #9e96a7;
        display: inline-block;
        margin-top: 1px;
      }
      p {
        margin-top: 14px;
        font-size: 18px;
        display: block;
        line-height: 30px;
        margin-top: 46px;
      }
    }
    img {
      width: 45px;
      height: 45px;
      border-radius: 100%;
    }
  }
}
.h_20 {
  height: 10px;
  background-color: #f2f2f2;
}
.van-tabs__content {
  img {
    width: 100%;
  }
  .tab2 {
    padding-left: 16px;
    ul {
      margin-top: 20px;
      li {
        height: 60px;
        width: 432px;
        border-bottom: 1px solid #eeeeee;
        color: #666666;
        line-height: 60px;
        font-size: 20px;
        &:last-child {
          height: 0;
          p {
            width: 250px;
            float: right;
            margin-right: 44px;
          
          }
        }
        span {
          display: inline-block;
          width: 88px;
          float: left;
        }
        p {
          display: inline-block;
          margin-left: 30px;
          width: 250px;
            float: right;
            margin-right: 44px;
          
        }
      }
    }
  }
  .tab3 {
    padding: 16px;
    h5 {
      color: #39362a;
      margin: 20px 0;
      font-size: 20px;
    }
    p {
      line-height: 35px;
      color: #999999;
      font-size: 20px;
    }
  }
}
</style>